
//获取放置数据的容器
let navList = document.querySelector(".navList");
let product = document.querySelector("#product");
// let arr1 = [];
//封装获取tab栏函数
function tab() {
    let res1;
    // let data;
    ajax({
        url: "http://chst.vip:1234/api/getbaicaijiatitle",
        success(res) {
            // console.log(res);
            //数组
            res1 = res.result;
            // data=res1;
            // console.log(data);
            // for (var i = 0; i < res1.length; i++) {
            //     for (var k in res1[i]) {
            //         if (res1[i][k] == i) {
            //             arr1.push(res1[i][k])
            //         }
            //     }
            //     console.log(res1[i]);
            // }
            // console.log(arr1)
            let currentArr1 = res1;
            let html = "";
            currentArr1.forEach(item => {
                html += `
                    <li id="tab">${item.title}</li>
                    `
            })
            navList.innerHTML = html

         //实现tab栏的切换
            let tabLis = navList.children;
                first=navList.firstElementChild;
            // console.log(first);
            first.setAttribute("class", "active")
            for (var i = 0; i < tabLis.length; i++) {
                tabLis[i].index = i;
                tabLis[i].onclick = function () {
                    for (var j = 0; j < tabLis.length; j++) {
                        tabLis[j].className = ""
                    }
                    // console.log(this.index);
                    this.className = "active"
                    product.innerHTML=products(this.index)
                }
            }
        },
        error(err, xhr) {
            console.log(err);
        }
    })
    // console.log(res);//异步的,这里是得不到返回的结果的

}

// 封装渲染商品列表的函数
function products(num) {
    let res2;
    ajax({
        url: "http://chst.vip:1234/api/getbaicaijiaproduct",
        data: { titleid: num },
        success(res) {
            res2 = res.result;
            let currentArr2 = res2;
            let html = "";
            currentArr2.forEach(item => {
                html += `
                    <ul class="info">
                     <li>
                        <div class=" im">
                            <div class="img fl">
                            ${item.productImg}
                            </div>
                            <div class="infoR">
                                <div class="title">
                                ${item.productName}
                                    <div class="price">
                                        ${item.productPrice}
                                    </div>
                                </div>
                                <div class="down">
                                 ${item.productCouponRemain}
                                    <div class="click">
                                         <div class="left">
                                                 ${item.productCoupon}
                                         </div>
                                        <div class="right">
                                            ${item.productHref}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </li>
            </ul>
                    `
            })
            // console.log(html);
            product.innerHTML = html
        },
        error(err, xhr) {
            console.log(err);
        }
    })
}
tab()
products(0)
// 点击回到顶部
let backTop = document.querySelector('.footer-main>div>a')
backTop.onclick = function(e){
    e.preventDefault()    
    let distans = document.documentElement.scrollTop
    // console.log(distans);
    let distansControl = setInterval(function(){
      distans -= 10
      document.documentElement.scrollTop = distans
      if(distans <= 0){
        clearInterval(distansControl)
      }
    },3)  
}
// 置顶
let zhiding= document.querySelector("#icon-zhiding");
// console.log(zhiding);
zhiding.onclick = function (e){
    // e.preventDefault()   
    // console.log(1);
    // console.log(document.documentElement.scrollTop)
    let distans2 = document.documentElement.scrollTop
    let distansControl = setInterval(function(){
        distans2 -= 10
        document.documentElement.scrollTop = distans2
        if(distans2 <= 0){
          clearInterval(distansControl)
        }
      },3)  
}